<template>
  <div id="billDetail">
    <nav aria-label="breadcrumb" role="navigation" v-if="printMode !== '1'">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-2">
          <router-link to="/bills">账单</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">详情</li>
        <span class="ms-auto me-2" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="detail !== null">
      <!-- 通用订单内容 -->
      <bill-detail-info
        :detailInfo="detail"
        @refresh="refresh()"
      ></bill-detail-info>
      <template v-if="isFlightBill">
        <bill-detail-flight
          :detailInfo="detail"
          @refresh="refresh()"
        ></bill-detail-flight>
      </template>
      <template v-else-if="isTrainBill">
        <bill-detail-train :detailInfo="detail"></bill-detail-train>
      </template>
      <template v-else-if="isHotelBill">
        <bill-detail-hotel :detailInfo="detail"></bill-detail-hotel>
      </template>
      <template v-else-if="isRefundBill">
        <bill-detail-refund :detailInfo="detail"></bill-detail-refund>
      </template>
      <template v-else-if="isVasBill">
        <bill-detail-vas
          :detailInfo="detail"
          @refresh="refresh()"
        ></bill-detail-vas>
      </template>
      <template v-else-if="isChangeBill">
        <bill-detail-change :detailInfo="detail"></bill-detail-change>
      </template>
      <template v-else-if="isCarBill">
        <bill-detail-car :detailInfo="detail"></bill-detail-car>
      </template>

      <bill-detail-history :detailInfo="detail"></bill-detail-history>
    </template>
  </div>
</template>

<script>
import {
  BILL_FLIGHT,
  BILL_HOTEL,
  BILL_TRAIN,
  BILL_REFUND,
  BILL_VAS,
  BILL_CHANGE,
  BILL_RENTAL_CAR,
} from "@/common/const.js";
import { searchBillDetail } from "@/api/bill.js";

import BillDetailInfo from "./bill-detail-info.vue";
import BillDetailFlight from "./bill-detail-flight.vue";
import BillDetailTrain from "./bill-detail-train.vue";
import BillDetailHotel from "./bill-detail-hotel.vue";
import BillDetailRefund from "./bill-detail-refund.vue";
import BillDetailVas from "./bill-detail-vas.vue";
import BillDetailChange from "./bill-detail-change.vue";
import BillDetailCar from "./bill-detail-car.vue";
import BillDetailHistory from "./bill-detail-history.vue";

export default {
  name: "BillDetail",
  components: {
    BillDetailInfo,
    BillDetailFlight,
    BillDetailTrain,
    BillDetailHotel,
    BillDetailRefund,
    BillDetailVas,
    BillDetailChange,
    BillDetailCar,
    BillDetailHistory,
  },
  data() {
    return {
      detail: null,
      id: 0,
      billNum: "",

      printMode: "0",
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    isRoot() {
      return this.$store.state.isRoot;
    },
    isFlightBill() {
      return this.detail.billType === BILL_FLIGHT;
    },
    isRefundBill() {
      return this.detail.billType === BILL_REFUND;
    },
    isChangeBill() {
      return this.detail.billType === BILL_CHANGE;
    },
    isHotelBill() {
      return this.detail.billType === BILL_HOTEL;
    },
    isTrainBill() {
      return this.detail.billType === BILL_TRAIN;
    },
    isVasBill() {
      return this.detail.billType === BILL_VAS;
    },
    isCarBill() {
      return this.detail.billType === BILL_RENTAL_CAR;
    },
  },
  mounted: function () {
    const printMode = this.$route.query.print;

    if (printMode === "1") {
      this.$store.commit("setPrintMode", 1);
      this.printMode = printMode;
    }

    this.id = parseInt(this.$route.params.id);
    if (this.id === 0) {
      this.billNum = this.$route.query.billNum;
    }
    this.searchBillDetail();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    refresh: function () {
      this.searchBillDetail();
    },
    searchBillDetail: function () {
      const params = {
        id: this.id,
        billNum: this.billNum,
      };

      searchBillDetail(params, (jsonResult) => {
        this.detail = jsonResult;
        if (this.id === 0) {
          this.id = this.detail.id;
        }
      });
    },
  },
};
// 1016
</script>